<template>
    <div class="main balance-list">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="110px">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商家名称：" prop="merchantName">
                            <el-input @keyup.enter.native="search" v-model="listQuery.merchantName" placeholder="商家名称"
                                      maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="账单开始时间：" prop="startTimeStr">
                            <el-date-picker
                                    v-model="listQuery.startTimeStr"
                                    type="month"
                                    placeholder="选择"
                                    value-format="yyyy-MM">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="账单结束时间：" prop="endTimeStr">
                            <el-date-picker
                                    v-model="listQuery.endTimeStr"
                                    type="month"
                                    placeholder="选择"
                                    value-format="yyyy-MM">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商品名称：" prop="goodsName">
                            <el-input @keyup.enter.native="search" v-model="listQuery.goodsName" placeholder="商品名称" maxlength="60" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="SKU：" prop="skuCode">
                            <el-input @keyup.enter.native="search" v-model="listQuery.skuCode" placeholder="SKU" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="商家编码" prop="merchantId" min-width="100"></el-table-column>
                <el-table-column align="center" label="商家名称" prop="merchantName" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="账单开始日期" width="160">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.startTime, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="账单截至日期" width="160">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.endTime, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="推送商家时间" width="160">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.pushTime, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="总金额" prop="totalAmount" min-width="100">
                    <template slot-scope="scope">
                        <router-link :to="{name: 'balanceDetail', params: {id: scope.row.id, type: 'pay'}}">
                            <el-button type="text">{{scope.row.totalAmount}}</el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="退款金额" prop="refundAmount" min-width="100">
                    <template slot-scope="scope">
                        <router-link :to="{name: 'balanceDetail', params: {id: scope.row.id, type: 'refund'}}">
                            <el-button type="text">{{scope.row.refundAmount}}</el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="财务调整金额" prop="adjustAmount" min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.adjustAmount}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="应付金额" prop="payableAmount" min-width="100"></el-table-column>
                <el-table-column align="center" label="操作" width="220">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isARemit">已打款</span>
                        <template v-else>
                            <el-button  type="text" size="mini" @click="showEdit(scope.row)">修改财务调整金额</el-button>
                            <el-button  type="text" size="mini" :disabled="!scope.row.isAllCheck" @click="remittance(scope.row.id)">打款</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>

            <el-dialog title="修改财务调整金额" :visible.sync="showEditPop">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="财务调整金额:" prop="adjustAmount" :rules="commonRules.floatRule">
                        <el-input v-model.number="formData.adjustAmount" placeholder="财务调整金额" maxlength="60"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                    <el-button @click="showEditPop = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
  export default {
    name: 'balanceList',
    data() {
      return {
        listLoading: false,
        listQuery: {
          merchantName: '',
          startTimeStr: '',
          endTimeStr: '',
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0,

        showEditPop: false,
        btnDisabled: false,
        formData: {
          id: '',
          adjustAmount: ''
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-merchant-bill/bill/list',
          method: 'post',
          data: this.listQuery
        }).then(({data}) => {
          this.list = data.rows;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      // 清空搜索条件
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
      },
      handleSizeChange(value) {
        this.listQuery.pageSize = value;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      remittance(id) {
        if (id) {
          this.$confirm(`确定进行【打款】操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.request({
              url: 'bsnl-merchant-bill/bill/remit',
              method: 'get',
              params: {
                id
              }
            }).then(() => {
              this.$message.success('操作成功');
              this.getList();
            }).catch(err => {
              console.log(err);
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        }
      },
      showEdit(row) {
        this.formData = {
          id: row.id,
          adjustAmount: row.adjustAmount
        };
        this.showEditPop = true;
      },
      save(){
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false;
          }

          this.request({
            url: '/bsnl-merchant-bill/bill/adjustSave',
            method: 'post',
            data: this.formData
          }).then(() => {
            this.btnDisabled = false;
            this.showEditPop = false;
            this.$message.success('修改成功');
            this.getList();
          }).catch(err => {
            this.btnDisabled = false;
          });
        })
      }
    }
  }
</script>
<style>
    .balance-list .el-dialog {
        max-width: 500px;
    }
</style>
